<template>
  <section class="todo-issues-main">
    <header class="todo-header">
      <p>进行中 {{ listData.doingListData.length }}</p>
    </header>
    <el-scrollbar class="list-box">
      <draggable
        v-model="listData.doingListData"
        item-key="id"
        group="todo"
        @change="handleChange"
        :sort="false"
        animation="300"
        style="width: 100%; min-height: 100px"
        ghost-class="ghost"
        chosen-class="chosenClass"
        :component-data="{ name: 'fade' }"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            <header class="item-title">
              <span @click="toDetail(element)">{{ element.title }}</span>
              <el-tag
                v-if="+element.top_id !== 0"
                class="opt-top"
                effect="plain"
                :style="{
            background: getOptColor(element.top_id as string),
            borderColor: getOptColor(element.top_id as string)
          }"
                ><span>{{ '置顶' }}</span></el-tag
              >
              <el-tag
                v-if="element.priority !== '不指定'"
                class="opt-priority"
                :style="{
                  color: getPriorityColor(element.priority),
                  borderColor: getPriorityColor(element.priority)
                }"
                effect="plain"
              >
                <span>{{ element.priority }}</span></el-tag
              >
            </header>
            <footer class="item-footer">
              <div class="item-comment">
                <i class="iconfont iconpinglun"></i>
                <!-- <span>{{ element.comment.length !== 0 ? element.comment.length : '' }}</span> -->
              </div>
              <div
                class="opt-tags"
                v-for="item in element.issues_tags"
                :key="element.id"
                :style="{
                  color: getTagsColor(item)
                }"
              >
                <i class="iconfont icon-biaoqian" style="font-size: 16px"></i>
                <span>{{ item }}</span>
              </div>
              <div class="move-icon">
                <i class="iconfont icon-yidongshu"></i>
              </div>
            </footer>
          </div>
        </template>
      </draggable>
    </el-scrollbar>
    <el-empty v-if="!listData.doingListData.length" :image-size="100" description="暂无内容" />
  </section>
</template>

<script lang="ts" setup>
import { onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'

// import { editIssuesData } from '@/apis/issues/issues-lists'
// import { Issues } from '@/views/issues/config/issues'
// import { newRecodeData } from '@/apis/issues/issues-record'

import draggable from 'vuedraggable'
import { editProblemsData } from '@/apis/system/problems'
import { IProblems } from '@/views/problemCenter/config/problems'

const issueStore = store()

const { listData } = storeToRefs(issueStore)
const { tagsData } = storeToRefs(issueStore)

/**
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('userInfo') as string) || ''
})

/**
 * @desc: 修改问题
 */
const editData = (data: object) => {
  return new Promise(function (reslove) {
    editProblemsData(data)
      .then((res) => {
        if (!res) return
        reslove(res.code)
      })
      .catch(() => {
        ElMessage('服务器内部错误')
      })
  })
}

/**
 * @desc: 标签移动后的回调
 */
const emit = defineEmits(['change'])
const handleChange = async (e: any) => {
  try {
    // any:第三方api返回的
    if (e.added) {
      // 记录操作日志
      // let params = {
      //   user_id: getUserInfo.value.id,
      //   issues_id: e.added.element.id,
      //   status: '进行中'
      // }
    //   newRecodeData(params)
      // e.added.element.status = '进行中'
      // e.added.element.change_status_person_id = getUserInfo.value.id
      // await editData(e.added.element, e.added.element.id)
      editData({
        _id: e.added.element.id,
        is_status: '进行中'
      })
      emit('change')
    }
  } catch (error) {
    console.log(error)
  }
}

/**
 * @desc: 获取置顶项
 */
const optIdColor: { [key: string]: string } = {
  '1': '#95d475'
}
const getOptColor = (res: string) => {
  return optIdColor[res]
}

/**
 * @desc: 详情页面
 */
const $router = useRouter()
const toDetail = (item: IProblems) => {
  $router.push({
    name: 'Detail',
    query: { id: item.id }
  })
}

/**
 * @desc: 获取标签信息
 */
onMounted(async () => {
  await issueStore.getTagsData()
})

const optTagsColor = (res: string) => {
  const findTags = tagsData.value.find((item) => {
    return item.label === res
  })
  return findTags?.tags_color
}

const getTagsColor = (res: string) => {
  return optTagsColor(res)
}

/**
 * @desc: 获取优先级
 */
const optPriorityColor: { [key: string]: string } = {
  不指定: '#B0B0B0',
  严重: '#EF0016',
  主要: '#FF8F00',
  次要: '#008AFF',
  不重要: '#73E06F'
}
const getPriorityColor = (res: string) => {
  return optPriorityColor[res]
}
</script>

<style lang="less" scoped>
.todo-issues-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 49%;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;

  .todo-header {
    display: flex;
    p {
      padding-bottom: 12px;
      box-sizing: border-box;
      color: #2a2f3d;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      line-height: 24px;
      letter-spacing: 1px;
    }
  }
  .list-box {
    flex-grow: 1;
    height: 0;
    list-style: none;
    .list-group-item {
      position: relative;
      width: 100%;
      padding: 12px 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      background-color: #f1f1f1;
      box-shadow: 0 2px 0 0 #eaf2fe;
      border: 1px solid #eaf2fe;
      border-left-width: 8px;
      border-left-color: rgb(95, 202, 157);
      cursor: -webkit-grab;
      &:hover {
        box-shadow: 0 5px 10px #ddd;
        transform: translateY(-3px);
      }
      &:hover .move-icon {
        opacity: 1;
      }
      .move-icon {
        position: absolute;
        top: 25px;
        right: 10px;
        opacity: 0;
      }
      .item-title {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        &:hover {
          color: #409eff;
        }
        .opt-top,
        .opt-priority {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          padding: 8px;
          margin-left: 10px;
        }
        .opt-top {
          span {
            color: #ffffff;
          }
        }
      }
      .item-footer {
        display: flex;
        align-items: center;
        overflow: hidden;
        .item-comment {
          display: flex;
          align-items: center;
          transform: translateY(2px);
          .iconpinglun {
            font-size: 18px;
            padding-right: 3px;
          }
        }
        .opt-tags {
          display: flex;
          align-items: center;
          font-size: 12px;
          margin-left: 10px;
          .icon-biaoqian {
            transform: translateY(2px);
            padding-right: 5px;
          }
        }
      }
    }
  }
}
</style>
